<template>
  <div style="padding: 50px 3%">
    <div class="row">
      <!--无项目时-->
      <div v-show="projects.length==0" style="margin-top: 100px; width: 100%; text-align: center ">
        <label style="font-size: 24px; font-family: 'Times New Roman';">
          There is no project history, <a href="index.html?id=0">To Create Now !</a>
        </label>
      </div>
      <div class="col-md-4" v-for="p in projects" :key="p._id">
        <div class="card mb-4 shadow-sm">
          <div style="padding: 3px 5px; background-color: #CD5555">
            <label style="font-size: 14px; color:#eee">项目名称：</label><label style="color: #fff">{{p.name}}</label>
          </div>
          <img class="card-img-top" data-src="" :alt="'Name' + ' [100%x225]'" style="height: 225px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22348%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16583fbebba%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A17pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16583fbebba%22%3E%3Crect%20width%3D%22348%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22116.7265625%22%20y%3D%22120.3%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true">
          <div class="card-body">
            <p class="card-text">This is a description for the project, unless you are so lazy to leave it blank...</p>
            <div class="d-flex justify-content-between align-items-center">
              <div class="btn-group">
                <button type="button" class="btn btn-sm btn-outline-secondary"><a :href="'view.html?id=' + p._id">View</a></button>
                <button type="button" class="btn btn-sm btn-outline-secondary"><a :href="'index.html?id=' + p._id">Edit</a></button>
              </div>
              <small class="text-muted">{{p.createTime}}</small>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as Util from '../js/util';

export default {
  name: 'project',
  components: {

  },
  data () {
    return {
      msg: 'I am one',
      names: ['graph1', 'graph2', 'graph3', 'graph4'],
      username: '',
      projects: []
    }
  },
  mounted: function () {
    this.username = Util.checkLogin() || '';
    this.request();
  },
  methods: {
    request: function () {
      let $this = this;
      Util.ajaxData('getProjectList', {}, (rst) => {
        console.log(rst);
        if (rst.status.code === 0) {
          $this.projects = rst.data.map((d) => {
            d.createTime = Util.dateFormat(d.createTime);
            return d;
          });
        }
      });
    }
  }
}
</script>
